<template>
  <div>
    <el-form-item label="线条颜色">
      <el-color-picker v-model="localData.lineColor" />
    </el-form-item>
    <el-form-item label="线条宽度">
      <el-input-number v-model="localData.lineWidth" controls-position="right" />
    </el-form-item>
    <el-form-item label="线条类型">
      <el-radio-group v-model="localData.lineType">
        <el-radio-button label="实线" value="solid" />
        <el-radio-button label="虚线" value="dashed" />
        <el-radio-button label="点状" value="dotted" />
      </el-radio-group>
    </el-form-item>
    <el-form-item label="开启渐变">
      <el-switch v-model="localData.isGradient" />
    </el-form-item>
    <el-form-item v-if="localData.isGradient" label="渐变高度">
      <el-input-number v-model="localData.gradient.height" controls-position="right" />
    </el-form-item>
    <el-form-item v-if="localData.isGradient" label="渐变方向">
      <el-radio-group v-model="localData.gradient.position">
        <el-radio-button label="向上" value="top" />
        <el-radio-button label="向下" value="bottom" />
        <el-radio-button label="向左" value="left" />
        <el-radio-button label="向右" value="right" />
      </el-radio-group>
    </el-form-item>
    <el-form-item v-if="localData.isGradient" label="渐变颜色">
      <el-tag
        :key="index"
        v-for="(tag, index) in localData.gradient.colors"
        closable
        size="default"
        @close="handleColorClose(tag)"
      >{{ tag }}
      </el-tag>
      <el-color-picker
        v-model="colorValue"
        show-alpha
        size="default"
        @change="handleColorConfirm"
        class="color-picker"
      />
    </el-form-item>
  </div>
</template>

<script>
export default {
  name: 'SeparatorConfig',
  props: {
    data: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      colorValue: '',
      localData: {}
    }
  },
  watch: {
    data: {
      handler(newVal) {
        if (newVal) {
          this.localData = newVal
        }
      },
      deep: true,
      immediate: true
    },
    localData: {
      handler(newVal) {
        this.$emit('update:data', newVal)
      },
      deep: true
    }
  },
  methods: {
    handleColorClose(tag) {
      this.localData.gradient.colors.splice(this.localData.gradient.colors.indexOf(tag), 1)
    },
    handleColorConfirm() {
      if (this.colorValue) this.localData.gradient.colors.push(this.colorValue)
      this.colorValue = ''
    }
  }
}
</script>

<style scoped></style>
